<form id="positionForm">
    <input name="id" type="hidden" th:value="${position?.id}">
    <input name="origin" type="hidden" value="1">
    <div class="form-group row">
        <label for="type" class="col-sm-2 col-form-label">资源位</label>
        <div class="col-sm-10">
            <select id="type" name="type" class="form-control" required>
                <option th:selected="${position?.type==1}" value="1">首页飘图</option>
                <option th:selected="${position?.type==2}" value="2">首页右上</option>
                <option th:selected="${position?.type==3}" value="3">首页右下</option>
                <option th:selected="${position?.type==4}" value="4">首页左上</option>
                <option th:selected="${position?.type==5}" value="5">首页左下</option>
            </select>
            <div class="invalid-feedback">请选择资源位</div>
        </div>
    </div>
    <div class="form-group row">
        <label for="img" class="col-sm-2 col-form-label">图片:</label>
        <div class="col-sm-10">
            <input type="text" th:value="${position?.img}" name="img" class="form-control"
                   id="img"
                   placeholder="图片地址" required>
            <div class="invalid-feedback">请输入图片</div>
            <br>
            <a type="button" class="btn btn-sm btn-block btn-info coverUploader">上传</a>
            <font color="red" id="position2show">建议图片宽高尺寸为180*110</font>
        </div>
    </div>
    <div class="form-group row">
        <label for="url" class="col-sm-2 col-form-label">链接:</label>
        <div class="col-sm-10">
            <input type="text" th:value="${position?.url}" name="url" class="form-control"
                   id="url"
                   placeholder="填写链接" required>
            <div class="invalid-feedback">请填写链接</div>
        </div>
    </div>
    <div class="form-group row position1show" th:style="${position?.type==1 ? '' : 'display:none'}">
        <label for="url" class="col-sm-2 col-form-label">飘图宽度:</label>
        <div class="col-sm-10">
            <input type="text" th:value="${position?.width}" name="width" class="form-control"
                   id="width"
                   placeholder="填写宽度">
            <div class="invalid-feedback">请填写宽度</div>
        </div>
    </div>
    <div class="form-group row position1show" th:style="${position?.type==1 ? '' : 'display:none'}">
        <label for="url" class="col-sm-2 col-form-label">飘图高度:</label>
        <div class="col-sm-10">
            <input type="text" th:value="${position?.height}" name="height" class="form-control"
                   id="height"
                   placeholder="填写高度">
            <div class="invalid-feedback">请填写高度</div>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function () {
        var type = $("#type").val();
        if (type == 1) {
            $("#position2show").hide();
        } else {
            $("#position2show").show();
        }
    });

    $('#type').on('change', function () {
        var type = $("#type").val();
        if (type == 1) {
            $(".position1show").show();
            $("#position2show").hide();
        } else {
            $(".position1show").hide();
            $("#position2show").show();
        }
    });
</script>